<template>
  <div class="my-student">
    <div class="student-container" v-loading="queryChidsLoading">
      <div class="search-types">
        <div
          class="search-type"
          v-for="t in searchTypeList"
          :key="t.value"
          :class="{ 'is__checked': cusSearchType === t.value }"
          @click="searchTypeChange(t.value)"
        >{{ t.label }}</div>
      </div>
      <div class="student-list" v-if="studentList.length > 0 && cusSearchType=== 1">
         <div v-for="item in studentList" :key="item.id" class="student-item">
          <div
            class="lesson-header"
            @click="setStudent(item)"
            :class="{
              'is_current':item.showChilds
            }"
          >
            <i :class="[`el-icon-caret-${item.showChilds ? 'bottom' : 'right'}`]" />
            <i class="el-icon-loading" v-if="item.showLoading" />
            <el-tooltip class="item" effect="dark" placement="right-start" :content="item.lessonName">
              <div>{{item.lessonName}}</div>
            </el-tooltip>
          </div>
          <el-collapse-transition>
            <div v-if="item.showChilds" class="student-child">
              <div v-for="(child) in studentSubject" :key="child.id" :class="{'child-current': child.contractId === currentStudent.contractId}" @click="setCurrentStudent(child)">
                <span>{{child.contractName}}</span>
                <span>签约时间：{{ moment(child.createTime).format("YYYY-MM-DD")}}</span>
              </div>
            </div>
          </el-collapse-transition>
        </div>
      </div>
      <div class="student-list" v-else-if="lessonsList.length > 0 && cusSearchType=== 2">
        <div v-for="item in lessonsList" :key="item.id" class="student-item">
          <div
            class="lesson-header"
            @click="toggleShow(item)"
            :class="{
              'is_current':item.showChilds
            }"
          >
            <i :class="[`el-icon-caret-${item.showChilds ? 'bottom' : 'right'}`]" />
            <i class="el-icon-loading" v-if="item.showLoading" />
            <el-tooltip class="item" effect="dark" :content="item.lessonName" placement="right-start">
              <div>{{item.lessonName}}</div>
            </el-tooltip>
          </div>
          <el-collapse-transition>
            <div v-if="item.showChilds" class="childs-container">
              <div
                v-for="(child) in item.students"
                :key="child.id"
                :class="{
                  'child-current': child.studentId === currentStudent.studentId
                }"
                @click="setCurrentStudent(child), listItem = item"
              >{{child.studentName || child.studentname }}</div>
            </div>
          </el-collapse-transition>
        </div>
      </div>
      <cus-empty v-else></cus-empty>
    </div>
    <div class="student-info-container" v-loading="queryChidsLoading">
      <div class="cus-tabs">
        <ul>
          <li
            v-for="item in classList"
            :key="item.value"
            :class="{ active: classType === item.value }"
            @click="setComponent(item.value)"
          >{{ item.label }}</li>
        </ul>
      </div>
      <component
        :lessonId="cusSearchType === 1 ? currentStudent.contractId : currentStudent.lessonId"
        :studentId="currentStudent.thirdId"
        :is="classType"
        :data="cusSearchType === 1 ? currentStudent : listItem"
        :searchType="cusSearchType"
        :key="comKey"
      ></component>
    </div>
  </div>
</template>

<script lang='ts'>
import { ref, computed } from 'vue'
import StudentInfo from './studentInfo/student-info.vue'
import teachPlan from './studentInfo/teach-plan.vue'
import learnReport from './studentInfo/learn-report.vue'
import stageReport from './studentInfo/stage-report.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import $ from '$'
import store from './store'
import moment from 'moment'
export default {
  components: { StudentInfo, teachPlan, learnReport, stageReport },
  setup() {
    let searchTypeList = ref([
      { label: '一对一', value: 1 },
      { label: '小组课', value: 2 },
    ])
    let classList = ref([
      { label: '学生基本信息', value: 'studentInfo' },
      { label: '教学计划', value: 'teachPlan' },
      { label: '学习报告', value: 'learnReport' },
      { label: '阶段报告', value: 'stageReport' },
    ])

    let studentList = ref([])
    let lessonsList: any = ref([])
    let menuChilds = ref([])
    let cusSearchType = ref(1)
    let queryChidsLoading = ref(false)
    let classType = ref('studentInfo')
    let currentStudent = ref({})
    let listItem = ref({})
    let comKey: any = ref('')
    let editState = computed(() => store.state.editState)
    const setCurrentStudent = (data) => {
      comKey.value = new Date()
      interceptPlan(() => {
        currentStudent.value = data
      })
    }
    //获取学生
    const setStudent = (data, isDefault?) => {
      isDefault ? getOneSubject(data, isDefault) : getOneSubject(data)
    }
    //获取合同
    let studentSubject = ref()
    const getOneSubject = (data, isDefault?) => {
      isDefault && setCurrentStudent(data)
      studentList.value.map((i: any) => {
        i.showChilds = i.id === data.id ? !data.showChilds : false
        i.showLoading = i.id === data.id ? !data.showLoading : false
      })
      if (data) {
        $.http.post('/admin/studentInfo/queryContract', { studentId : data.thirdId }).then(res => {
          if (res.result) {
            studentSubject.value = res.json.map(e => (e.studentId = data.lessonId, e.studentName = data.studentName ? data.studentName : data.lessonName, e))
            data.showLoading = false
          } else {
            ElMessage.error(res.msg)
          }
        })
      }
    }
    const searchTypeChange = (val) => {
      interceptPlan(() => {
        cusSearchType.value = val
        getMenuList()
      })
    }
    const setComponent = (val) => {
      interceptPlan(() => {
        classType.value = val
      })
    }
    const getMenuList = async () => {
      queryChidsLoading.value = true
      currentStudent.value = {}
      let res = await $.http.post('/admin/lessonInfo/queryLessons', {searchType: cusSearchType.value})
      if (res.result) {
        if (cusSearchType.value === 2) {
          lessonsList.value = res.json.map(ele => (ele.students = [], ele.showChilds = false, ele))
          toggleShow(res.json[0], true)
          listItem.value = res.json[0]
        } else {
          studentList.value = res.json.map(ele => (ele.showChilds = false, ele))
          setStudent(studentList.value[0], true)
        }
      }
      !res.result && ElMessage.error(res.msg)
      queryChidsLoading.value = false
    }
    getMenuList()
    const toggleShow = async (item, isDefault?) => {

      item && (item.showLoading = true)
      if (item && !item.showChilds) {
        let res = await $.http.post('/admin/lessonInfo/queryStudent', {
          lessonId: item.lessonId,
          searchType: 2,
          startDate: moment().subtract(3, 'months').format('YYYY-MM-DD'),
          endDate: moment().add(7, 'days').format('YYYY-MM-DD'),
        })
        lessonsList.value.map((i: any) => {
          i.showChilds = i.id === item.id ? !item.showChilds : false
          i.showLoading = i.id === item.id ? !item.showLoading : false
        })
        if (res.result) {
          item.students = res.json
          lessonsList.value = lessonsList.value.map((ele: any) => {
            return item.id === ele.id ? item : ele
          })
          isDefault &&  setCurrentStudent(lessonsList.value[0].students[0])
        } else {
          return ElMessage.error(res.msg)
        }
      } else {
        lessonsList.value.map((i: any) => {
          i.showChilds = i.id === item.id ? !item.showChilds : false
          i.showLoading = i.id === item.id ? !item.showLoading : false
        })
      }
    }
    const interceptPlan = (cb) => {
      if (editState.value) {
        ElMessageBox.confirm('当前教学计划修改未提交，是否继续？', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            store.commit('set_edit_state', false)
            cb()
          })
          .catch()
      } else {
        cb()
      }
    }
    return {
      searchTypeList,
      searchTypeChange,
      cusSearchType,
      classList,
      classType,
      studentList,
      toggleShow,
      getMenuList,
      queryChidsLoading,
      menuChilds,
      lessonsList,
      currentStudent,
      setCurrentStudent,
      listItem,
      setComponent,
      interceptPlan,
      comKey,
      setStudent,
      studentSubject,
      getOneSubject,
      moment,
    }
  },
}
</script>

<style scoped lang="scss">
.my-student {
  height: 100%;
  display: flex;
  .student-container {
    width: 260px;
    background: #ffffff;
    border-radius: 6px 6px 0px 0px;
    border: 1px solid #dbdee5;
    .search-types {
      display: flex;
      height: 42px;
      :nth-child(1) {
        border-radius: 6px 0px 0px 0px;
      }
      :nth-child(2) {
        border-radius: 0px 6px 0px 0px;
      }
      & > div {
        flex: 1;
        color: #77808d;
        line-height: 42px;
        text-align: center;
        cursor: pointer;
        &.is__checked {
          color: #fff;
          background: #72b22a;
        }
      }
    }
    .student-list {
      // display: grid;
      // grid-gap: 1px;
      padding: 1px 0;
      height: calc(100% - 42px);
      overflow-y: auto;
      overflow-x: hidden;
      .lesson-header {
        background: #ffffff;
        padding: 16px 5px 16px 10px;
        cursor: pointer;
        display: flex;
        align-items: center;
        box-shadow: 0px -1px 0px 0px #dcdee3;
        > i {
          &::before {
            font-size: 16px;
            color: #000;
          }
        }
        > div {
          width: 175px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 13px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
        }
      }
      .is_current {
        > div {
          color: #72b22a;
        }
      }
      .childs-container {
        background: rgba(255, 255, 255, 0);
        > div {
          padding: 6px 44px;
          cursor: pointer;
          &:hover {
            background: #dbdee5;
            cursor: pointer;
          }
        }
        .child-current {
          background: #72b22a;
          color: #ffffff;
          &:hover {
            background: #72b22a;
            cursor: pointer;
          }
        }
      }
      .student-child {
        background: rgba(255, 255, 255, 0);
        > div {
          padding: 6px 30px;
          cursor: pointer;
          &:hover {
            background: #dbdee5;
            cursor: pointer;
          }
          & > span:nth-of-type(2) {
            margin-left: 10px;
          }
        }
        .child-current {
          background: #72b22a;
          color: #ffffff;
          &:hover {
            background: #72b22a;
            cursor: pointer;
          }
        }
      }
    }
  }
  .student-info-container {
    flex: 1;
    margin-left: 20px;
    background: #ffffff;
    box-shadow: 0px 1px 6px 0px rgba(91, 125, 255, 0.08);
    border-radius: 6px;
    border: 1px solid #ebf0fc;
    .cus-tabs {
      flex: auto;
      text-align: left;
      border-bottom: 1px solid #dee4f1;
      padding-top: 15px;
      ul {
        display: inline-block;
        margin-bottom: -6px;
      }
      li {
        float: left;
        padding: 10px 35px;
        color: #000;
        font-size: 16px;
        list-style: none;
        position: relative;
        cursor: pointer;
        &.active::after {
          content: '';
          display: block;
          width: 70%;
          height: 5px;
          background: #72b22a;
          border-radius: 3px;
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
        }
        &.active {
          color: #72b22a;
        }
      }
    }
  }
}
</style>
